<script setup>
import { ref,onMounted } from 'vue';
import {useUserStore} from "@/stores/userStore.js";
import UserEdit from "@/views/system/UserEdit.vue";
const userStore = useUserStore();

const tableData = ref([]);
const userEditRef = ref(null);

onMounted(()=>{
  userStore.getUserList();
  tableData.value = userStore.userList;
})

const handleCurrentChange = (val) => {
  userStore.pageInfo.pageNum = val;
  userStore.getUserList();
};

const handleEdit = (userInfo) => {
  userEditRef.value.show(userInfo);
}

</script>

<template>
  <div>
  <el-table :data="tableData">
    <el-table-column label="账号" prop="username"></el-table-column>
    <el-table-column label="姓名" prop="realName"></el-table-column>
    <el-table-column label="手机号" prop="mobile"></el-table-column>
    <el-table-column label="邮箱" prop="email"></el-table-column>
    <el-table-column label="用户类型" prop="userType"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :total="userStore.pageInfo.total"
    :page-size="userStore.pageInfo.pageSize"
    :current-page.sync="userStore.pageInfo.pageNum"
    @current-change="handleCurrentChange"
  />

    <UserEdit ref="userEditRef"/>

  </div>
</template>

<style scoped>
</style>